<template>
	<view>
		<l-painter :board="poster" ref="painter" />
	</view>
</template>

<script>
	export default {
		name: "ticket-poster",
		props: {
			options: {
				type: Object,
				default: () => ({}),
			},
		},
		data() {
			return {};
		},
		computed: {
			poster() {
				return {
					css: {
						// 根节点若无尺寸，自动获取父级节点
						width: '675rpx',
					},
					views: [{
						css: {
							padding: "30rpx",
							background: "rgba(255, 255, 255, 1)",
							borderRadius: "10rpx"
						},
						type: "view",
						views: [{
								css: {
									color: 'rgba(56, 56, 56, 1)',
									fontSize: '32rpx',
									fontWeight: 'bold',
									marginBottom: '20rpx',
								},
								text: this.$zhTran('提货凭证'),
								type: "text",
							},
							{
								css: {
									display: 'flex',
									alignItems: 'top',
									marginBottom: '20rpx',
								},
								views: [{
									css: {
										color: 'rgba(150, 150, 150, 1)',
										fontSize: '26rpx',
										width: '180rpx',
									},
									views: [{
										css: {
											marginBottom: '20rpx',
										},
										text: this.$zhTran('团       长：'),
										type: "text",
									}, {
										text: this.$zhTran('提货地址：'),
										type: "text",
									}],
									type: "view"
								}, {
									css: {
										color: 'rgba(150, 150, 150, 1)',
										fontSize: '26rpx',
									},
									views: [{
										css: {
											marginBottom: '20rpx',
											width: '450rpx',
										},
										text: this.options.name,
										type: "text",
									}, {
										css: {
											width: '450rpx',
										},
										text: this.options.region_address,
										type: "text",
									}],
									type: "view"
								}],
								type: "view"
							}, {
								css: {
									margin: '30rpx 0',
									width: '90%',
									height: '1rpx',
									border: '1rpx dashed rgba(226, 226, 226, 1)',
								},
								type: "view",
							}, {
								css: {
									display: 'flex',
									alignItems: 'center',
									justifyContent: 'center',
								},
								type: "view",
								views: [{
									css: {
										width: '200rpx',
										height: '200rpx'
									},
									type: 'qrcode',
									text: this.options.pickup_code,
								}]
							}, {
								css: {
									width: '85%',
									textAlign: 'center',
									margin: '50rpx 0',
								},
								views: [{
									css: {
										color: 'rgba(56, 56, 56, 1)',
										fontSize: '26rpx',
									},
									text: this.$zhTran('提货码：') + this.options.pickup_code,
									type: "text",
								}],
								type: "view"
							}
						],
					}, ]
				}
			}
		},
		methods: {
			drawCanvas() {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "png",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: "url",
					quality: 1,
					success: (res) => {
						this.$emit("success", res.tempFilePath);
					},
					complete: () => {
						this.$emit("complete");
					},
				});
			},
		},
	};
</script>

<style>

</style>